<template>
    <div class="btg">
        <div class="tops">
            <div>
            <span>实时游客统计</span>
            <p class="bot"></p>
            </div>
            <p>
                可预约总量 <span style="color:rgb(193, 170, 0);">99999</span>人
            </p>
        </div>
        <div class="berc">
         
            <span class="spans" v-for="(item, index) in str" :key="index">{{item}}</span>
        </div>
        <div class="sui" ref="liqu"></div>


    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import 'echarts-liquidfill'
import {ref,onMounted} from 'vue'
let liqu = ref()
let str = ref('12433人')
onMounted(()=>{
    let mychar = echarts.init(liqu.value)
    mychar.setOption({
        title:{
            text:'水球图'
        },
        series: [{
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3],
        radius: '96%'
    }]
    })
//     let option = {
//     series: [{
//         type: 'liquidFill',
//         data: [0.6]
//     }]
// };
})

</script>

<style scoped lang="scss">
.btg {
    background: url(../../images/dataScreen-main-lt.png) no-repeat;
    background-size: cover;
    margin-top: 20px;
    height: 38%;


    .tops{
        margin-top: 0;
        display: flex;
        height: 50px;
        justify-content: space-around;
        // align-items: center;
        div{
            font-size: 20px;
            width: 60%;
           margin-left: 10px;
           margin-top: -10px;
            .bot{
                margin-top: 10px;
                height: 5px;
                background: url(../../images/dataScreen-title.png) no-repeat;

            }
        }
        p{
            width: 40%;
            line-height: 50px;


        }
    }
    .berc{
        width: 95%;
        height: 50px !important;
        margin: 10px auto;
        display: flex;
        justify-content: center;
        span{
            flex: 1;
            background: url(../../images/total.png) no-repeat;
            background-size: cover;
            line-height: 40px;
            z-index: 9999;
            font-size: 20px;
            color: aqua;
            font-weight: bold;
            text-align: center;
        }
    }
    .sui{
        height: 240px !important;
    }
}
</style>